import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import '../controllers/character_controller.dart';
import '../controllers/user_controller.dart';
import '../models/ai_character.dart';
import '../utils/theme.dart';

class CharacterDetailView extends StatelessWidget {
  final String characterId;

  const CharacterDetailView({
    super.key,
    required this.characterId,
  });

  @override
  Widget build(BuildContext context) {
    final character = context.read<CharacterController>().getCharacterById(characterId)!;
    final userController = context.watch<UserController>();
    final user = userController.user;

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 300.h,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                character.avatarUrl,
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.all(16.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    character.name,
                    style: TextStyle(
                      fontSize: 24.sp,
                      fontWeight: FontWeight.bold,
                      color: AppTheme.textColor,
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    character.description,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: AppTheme.greyColor,
                    ),
                  ),
                  SizedBox(height: 24.h),
                  Text(
                    'Personality',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: AppTheme.textColor,
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    character.personality,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: AppTheme.greyColor,
                    ),
                  ),
                  SizedBox(height: 24.h),
                  Text(
                    'Topics of Interest',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: AppTheme.textColor,
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Wrap(
                    spacing: 8.w,
                    runSpacing: 8.h,
                    children: character.topics.map((topic) {
                      return Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 12.w,
                          vertical: 6.h,
                        ),
                        decoration: BoxDecoration(
                          color: AppTheme.primaryColor.withOpacity(0.1),
                          borderRadius: BorderRadius.circular(16.r),
                        ),
                        child: Text(
                          topic,
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: AppTheme.primaryColor,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      );
                    }).toList(),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, -4),
            ),
          ],
        ),
      ),
    );
  }
} 